<template>
  <div class="wrapper">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">应急抢修</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to="{ path: '/' }">重要保电</el-breadcrumb-item> -->
        <el-breadcrumb-item>重要保电</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="box">
            <div class="title">
              <span>保电站线</span>
              <img src="../../assets/img/Picture/title.jpg" alt="">
            </div>
            <div style="width: 100%;">
              <div class="circuit">
                <div class="circuit-icon">
                  <span style="white-space: nowrap;">线路</span>
                  <img src="../../assets/img/Picture/xl.png" alt="">
                </div>
                <div style="flex:1;height: 100%;">
                  <VoltageEcharts echartsId="xl" />
                </div>
              </div>
              <div class="circuit">
                <div class="circuit-icon">
                  <span style="white-space: nowrap;">电站</span>
                  <img src="../../assets/img/Picture/dz.png" alt="">
                </div>
                <div style="flex:1;height: 100%;">
                  <VoltageEcharts echartsId="dz" />
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="  height: 100%;padding:5px;border: 1px solid #0c43b7;box-sizing: border-box;">
            <mapContent></mapContent>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box">
            <div class="title"><span>人员签到管理</span><img src="../../assets/img/Picture/title.jpg" alt=""> </div>
            <div id="sign" style="width: 100%;height: 200px;"></div>
            <div class="time">{{dayTime}}上传情况</div>
            <el-progress style="margin-top: 15px;" :stroke-width="10" :percentage="70" define-back-color="#1c7afe" text-color="#24b2e0"></el-progress>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期">
              </el-table-column>
              <el-table-column prop="sign" label="应签">
              </el-table-column>
              <el-table-column prop="unsigned" label="已签">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-top: 10px;">
        <el-col :span="6">
          <div class="box">
            <div class="title" style="margin-bottom: 30px;"><span>气象信息</span> <img src="../../assets/img/Picture/title.jpg" alt=""></div>
            <div class="weather" v-for="(item,i) in weatherList" :key="i">
              <div class="block"></div>
              <div class="place">{{item.title}}</div>
              <div>{{ item.text }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box">
            <div class="title"><span>会议进程</span> <img src="../../assets/img/Picture/title.jpg" alt=""></div>
            <div class="conference">
              <div>9月8日</div>
              <div>9月9日</div>
              <div>9月10日</div>
              <div>9月11日</div>
              <div>9月12日</div>
              <div>9月13日</div>
              <div>9月14日</div>
              <div>9月15日</div>
              <div>9月16日</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box">
            <div class="title" style="margin-bottom: 30px;"><span>保电措施方案</span> <img src="../../assets/img/Picture/title.jpg" alt=""></div>
            <div class="scheme">
              <div>
                <div class="scheme-tit">输电方案</div>
                <div class="scheme-file">
                  <span>0430号方案.doc</span>
                  <span>0430号方案.doc</span>
                </div>
              </div>
              <div>
                <div class="scheme-tit">变电方案</div>
                <div class="scheme-file">
                  <span>0430号方案.doc</span>
                  <span>0430号方案.doc</span>
                </div>
              </div>
              <div>
                <div class="scheme-tit">配电方案</div>
                <div class="scheme-file">
                  <span>0430号方案.doc</span>
                  <span>0430号方案.doc</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box">
            <div class="title"><span>物资配备</span><img src="../../assets/img/Picture/title.jpg" alt=""> </div>
            <div class="materials">
              <div class="materials-icon">
                <div class="triangle"></div>
                <div class="rectangle"></div>
              </div>
              <div class="materials-num">
                <div class="progress">
                  <div style="width:50%;background-color: #f26777;"></div>
                  <div>工作人员150人</div>
                </div>
                <div class="progress">
                  <div style="width:70%;background-color: #2186f5;"></div>
                  <div>外来人员447人</div>
                </div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="materials" style="width: 50%;">
                <div class="materials-icon">
                  <div class="triangle"></div>
                  <div class="rectangle"></div>
                </div>
                <div class="materials-num">
                  <div class="progress">
                    <div style="width:50%;background-color: #f26777;"></div>
                    <div>无人机5架</div>
                  </div>
                  <div class="progress">
                    <div style="width:50%;background-color: #2186f5;"></div>
                    <div>无线单兵5架</div>
                  </div>
                </div>
              </div>
              <div class="materials" style="width: 50%;">
                <div class="materials-icon">
                  <div class="triangle"></div>
                  <div class="rectangle"></div>
                </div>
                <div class="materials-num">
                  <div class="progress">
                    <div style="width:20%;background-color: #f26777;"></div>
                    <div>指挥车1辆</div>
                  </div>
                  <div class="progress">
                    <div style="width:70%;background-color: #2186f5;"></div>
                    <div>车辆10辆</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="materials">
              <div class="materials-icon">
                <div class="triangle"></div>
                <div class="rectangle"></div>
              </div>
              <div class="materials-num">
                <div class="progress">
                  <div style="width:20%;background-color: #f26777;"></div>
                  <div>实施视频50台</div>
                </div>
                <div class="progress">
                  <div style="width:60%;background-color: #2186f5;"></div>
                  <div>图像监控200台</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import VoltageEcharts from "./components/voltageEcharts.vue";
import mapContent from "../EarlyWarningManagement/WarningAction/components/mapContent.vue";
import { parseStamp } from "@/utils/public.js";
export default {
  components: { VoltageEcharts, mapContent },
  data() {
    return {
      dayTime: parseStamp(new Date(), "YYYY年MM月DD日"),
      tableData: [
        {
          date: "2023-5-18",
          sign: "440",
          unsigned: "447"
        }
      ],
      weatherList: [
        {
          title: "主场馆",
          text: "晴天8~14℃ 东南风2级 PM2.5(90) AQI(优)"
        },
        {
          title: "场馆一",
          text: "晴天8~14℃ 东南风2级 PM2.5(90) AQI(优)"
        },
        {
          title: "场馆二",
          text: "晴天8~14℃ 东南风2级 PM2.5(90) AQI(优)"
        },
        {
          title: "场馆三",
          text: "晴天8~14℃ 东南风2级 PM2.5(90) AQI(优)"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initPie();
    });
  },
  methods: {
    initPie() {
      const myChart = this.$echarts.init(document.getElementById("sign")); // 图标初始化
      myChart.setOption({
        title: {
          text: `${this.dayTime}签到情况`,
          left: "left",
          top: "5%",
          textStyle: {
            color: "#a5c9ed"
          }
        },

        tooltip: {
          trigger: "item"
        },
        series: [
          {
            type: "pie",
            top: "10%",
            radius: ["40%", "65%"],
            data: [
              { value: 447, name: "应签" },
              { value: 445, name: "已签" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    "#71f7f8",
                    "#b5b5fb"
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  :deep(.el-breadcrumb) {
    font-size: 16px;
  }
  .location-wrap {
    line-height: 25px;
  }
}
:deep(.el-col) {
  height: 100%;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 20px;
  height: 100%;
}
.box {
  height: 100%;
  padding: 10px 20px;
  border: 1px solid #0c43b7;
  box-sizing: border-box;
}
.title {
  font-size: 18px;
  color: #e9ad62;
  > img {
    margin-left: 15px;
  }
}
.circuit {
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  .circuit-icon {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1c55b9;
    > img {
      margin-top: 15px;
      width: 30px;
      height: 30px;
    }
  }
}
.time {
  color: #a5c9ed;
}
::v-deep .el-table,
.el-table__expanded-cell {
  padding: 20px !important;
  background-color: transparent !important;
}
::v-deep .el-table th {
  background-color: transparent !important;
  border-bottom: 1px solid #5078fc !important;
  color: #fefefe !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}
.weather {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
  .block {
    width: 15px;
    height: 8px;
    border-radius: 2px;
    background-color: #1c56b8;
    margin-right: 10px;
  }
  .place {
    font-size: 18px;
    color: #1c56b8;
    margin-right: 10px;
  }
}
.conference {
  display: flex;
  flex-wrap: wrap;
  > div {
    border: 1px solid #0dd6f4;
    width: 90px;
    text-align: center;
    color: #fff;
    background-color: #0450d7;
    margin: 30px 0 0 40px;
  }
}
.scheme {
  display: flex;
  justify-content: space-between;
  > div {
    width: 30%;
  }
  .scheme-tit {
    color: #3974e4;
  }
  .scheme-file {
    display: flex;
    flex-direction: column;
    color: #fff;
    border-right: 1px dotted #0450d7;
    > span {
      margin-top: 10px;
    }
  }
  > div:nth-child(3) {
    .scheme-file {
      border-right: 0px;
    }
  }
}
.materials {
  display: flex;
  font-size: 14px;
  color: #0bc5da;
  margin-top: 30px;
  .materials-icon {
    display: flex;
    margin-right: 8px;
    .triangle {
      border-style: solid;
      border-color: transparent;
      border-width: 20px 10px 20px 0;
      border-right-color: #1866ef;
    }
    .rectangle {
      width: 10px;
      height: 40px;
      background-color: #1866ef;
    }
  }
  .materials-num {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    .progress {
      display: flex;
      align-items: center;
      > div:nth-child(1) {
        height: 15px;
        margin-right: 5px;
      }
      > div:nth-child(2) {
        white-space: nowrap;
      }
    }
  }
}
</style>
